// 1:导入Vue核心库  下载路由是第一步
import Vue from "vue";
// 2：下载路由插件 npm i vue-router@3 再导入vue-router插件
import VueRouter from "vue-router";

// 导入页面组件
import MyHome from "@/views/MyHome.vue";
import MyNews from "@/views/MyNews.vue";
import MySport from "@/views/MySport.vue";
// 继续引入sport的子组件
import MyIndex from "@/views/sports/MyIndex.vue";
import MySide from "@/views/sports/MySide.vue";
import MyOuter from "@/views/sports/MyOuter.vue";

// 3：使用Vue.use(插件名) 是Vue的插件都这样使用，如moment时间插件
Vue.use(VueRouter);
// 4:船舰路由实例对象
const router = new VueRouter({
  // 6：定义路由的规则
  routes: [
    { path: "/", redirect: "/home" },
    { path: "/home", component: MyHome },
    { path: "/news", component: MyNews },
    {
      path: "/sport",
      component: MySport,
        children: [
           
        { path: "index", component: MyIndex },
        { path: "side", component: MySide },
        { path: "outer", component: MyOuter },
      ],
    },
  ],
});
// 模块化的规范是一个文件就是一个模块，模块内部定义的变量外部是访问不到的
// 除非导出去
// 默认导出是default  一般适合当前文件只有一个需要导出
export default router;
